<template>
	<view>
		<u-swiper :list="bannerList" @change="e => currentNum = e.current" @click="handleSwiperClick" :autoplay="false"
			indicatorStyle="right: 20px" width="750rpx" height="400rpx">
			<!-- 自定义指示器显示当前/总数 -->
			<template #indicator>
				<view class="absolute bottom-4 right-4 bg-black/50 text-white px-3 py-1 rounded-full text-sm">
					{{ currentNum + 1 }}/{{ bannerList.length }}
				</view>
			</template>
		</u-swiper>
		<view class="navTitle">
			<h1>{{dataList.name}}
				<span v-for="(item,index) in dataList.categoryNameList">--{{item}}</span>
				--{{dataList.manufactureName}}
			</h1>
			<p>￥{{dataList.price}}/米</p>
			<view class="status_main">
				<view class="deleteBtn">
					<span class="status" @click="delProduct()">删除</span>
				</view>
				<span class="status" v-if="dataList.cargo==1" @click="statusCargo(0)">上架</span>
				<span class="status" v-else @click="statusCargo(1)">下架</span>
			</view>

		</view>
		<view class="recommend-section">
			<view class="section-title">
				<h2>相关推荐</h2>
			</view>
			<view class="recommend-grid">
				<view class="recommend-item" v-for="(item,index) in correlationList" :key="index">
					<u--image class='item-image' v-if="item.flatPatternmaking!=null" :showLoading="true"
						:src="item.flatPatternmaking[0].ossUrl"></u--image>
					<u-image v-else class='item-image' :showLoading="true" :src="'/static/zw.png'"></u-image>
					<view class="item-info">
						<span class="item-title">{{item.name}}
							<span v-for="(correlation,keys) in item.categoryNameList">-{{correlation}}</span>
							-{{item.manufactureName}}
						</span>
						<span class="item-price">￥{{item.price}}/米</span>
					</view>
				</view>
			</view>
		</view>
		<view class="recommend-section">
			<view class="section-title">
				<h2>热销推荐</h2>
			</view>
			<view class="recommend-grid">
				<view class="recommend-item" v-for="(item,index) in hotlationList" :key="index">
					<u--image class='item-image' v-if="item.flatPatternmaking!=null" :showLoading="true"
						:src="item.flatPatternmaking[0].ossUrl"></u--image>
					<u-image v-else class='item-image' :showLoading="true" :src="'/static/zw.png'"></u-image>
					<view class="item-info">
						<span class="item-title">{{item.name}}
							<span v-for="(correlation,keys) in item.categoryNameList">-{{correlation}}</span>
							-{{item.manufactureName}}</span>
						<span class="item-price">￥{{item.price}}/米</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 删除确认框 -->
		<u-popup :show="show" mode="center" @close="close">
			<view class="showMode">
				<p>是否确认删除?</p>
				<p>删除后无法恢复，请谨慎操作</p>
			</view>
			<view class="twoConfirm">
				<span class="status" @click="twoConfirmBtn()">确定</span>
				<span @click="show=false">取消</span>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import ajax from '../../utils/ajax';
	export default {
		data() {
			return {
				show: false,
				currentNum: 0, // 轮播图索引从0开始
				bannerList: [], // 初始化为空数组避免报错
				dataList: {
					flatPatternmaking: null
				},
				correlationList: null,
				hotlationList: null,
				loadingCorrelation: false,
				errorCorrelation: false,
				loadingHot: false,
				errorHot: false
			};
		},
		onLoad(options) {
			const pms = {
				name: options.name?.replace(/^"|"$/g, '') || '',
				current: 1,
				size: 1
			};

			this.loadProductDetail(pms);
		},
		methods: {
			//删除商品
			delProduct() {
				this.show = true
			},
			
			// 删除弹出层二次确认
			close() {
				this.show = false
				// console.log('close');
			},
			twoConfirmBtn(){
				const pms={
					id:this.dataList.id
				}
				ajax.post('/api/boke/v1/item/del',pms,{
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					}
				}).then(res=>{
					console.log(res,'删除确认')
				})
			},
			// 处理轮播图点击事件
			handleSwiperClick(e) {
				uni.previewImage({
					urls: this.bannerList, // 所有图片URL
					current: this.currentNum, // 当前点击的图片索引
					indicator: 'number', // 显示数字指示器
					loop: true // 支持循环预览
				});
			},
			// 加载商品详情
			loadProductDetail(pms) {
				ajax.get('/api/boke/v1/item/page', pms, {})
					.then(result => {
						this.dataList = result.data.records[0] || {};
						this.bannerList = this.dataList.flatPatternmaking?.map(item => item.ossUrl) || [];

						// 加载相关推荐
						if (this.dataList.manufactureId) {
							this.loadCorrelationList(this.dataList.manufactureId);
						}

						// 加载热销推荐
						this.loadHotProducts();
					})
					.catch(error => {
						console.error('商品详情请求失败:', error);
					});
			},
			// 加载相关推荐
			loadCorrelationList(manufactureId) {
				this.loadingCorrelation = true;
				this.errorCorrelation = false;

				const correlationPms = {
					current: 1,
					size: 6,
					manufactureId: manufactureId
				};

				ajax.get('/api/boke/v1/item/page', correlationPms, {})
					.then(correlation => {
						console.log(correlation, '相关推荐查询结果');
						this.correlationList = correlation.data?.records || [];
					})
					.catch(error => {
						console.error('相关推荐请求失败:', error);
						this.errorCorrelation = true;
					})
					.finally(() => {
						this.loadingCorrelation = false;
					});
			},
			//加载热销推荐
			loadHotProducts() {
				this.loadingHot = true;
				this.errorHot = false;

				const correlationPms = {
					current: 1,
					size: 6,
					hotSales: 1
				};

				ajax.get('/api/boke/v1/item/page', correlationPms, {})
					.then(correlation => {
						console.log(correlation, '相关推荐查询结果');
						this.hotlationList = correlation.data?.records || [];
					})
					.catch(error => {
						console.error('相关推荐请求失败:', error);
						this.errorHot = true;
					})
					.finally(() => {
						this.loadingHot = false;
					});
			},
			//上架下架
			statusCargo(e) {
				console.log(e, '点击上下架')
				console.log(this.dataList, '商品参数')
				const pms = {
					name: this.dataList.name,
					categoryIdList: this.dataList.categoryIdList,
					manufactureId: this.dataList.manufactureId,
					cargo: e,
					hotSales: this.dataList.hotSales,
					newProduct: this.dataList.newProduct,
					price: this.dataList.price,
					vipPrice: this.dataList.vipPrice,
					flatPatternmakingId: this.dataList.flatPatternmakingId,
					productIntroductionImagesId: this.dataList.productIntroductionImagesId,
					remark: this.dataList.remark,
					id: this.dataList.id
				}
				console.log(pms, '商品参数2')
				ajax.put('/api/boke/v1/item', pms, {
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					}
				}).then(res => {
					console.log(res, '修改上下架')
					if (res.code == '00000') {

						if (e == 0) {
							uni.$u.toast('上架成功');
							this.dataList.cargo = 0
						} else {
							uni.$u.toast('下架成功');
							this.dataList.cargo = 1
						}

					} else {
						uni.$u.toast(res.msg);
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	::deep .u-swiper {
		width: 100%;
		height: 400rpx;

		.u-swiper-item image {
			object-fit: cover;
		}
	}

	.navTitle {
		font-size: 16rpx;
		border-bottom: 1rpx solid #999;
		padding-bottom: 20rpx;
		margin: 20rpx;

		p {
			font-size: 40rpx;
			color: red;
			font-weight: bold;
			margin-top: 20rpx;
		}

		// 上架下架
		.status_main {
			display: flex;
			justify-content: flex-end;

			.status {
				width: 120rpx;
				text-align: center;
				font-size: 26rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				font-size: 34rpx;
				font-weight: 500;
				letter-spacing: 2rpx;
				background: linear-gradient(90deg, #fbe45e 0%, #D533BA 100%);
				border: none;
				box-shadow: 0 8rpx 20rpx rgba(213, 51, 186, 0.25);
				transition: all 0.2s;

				&:hover {
					opacity: 0.9;
					transform: translateY(-2rpx);
					box-shadow: 0 10rpx 25rpx rgba(213, 51, 186, 0.3);
				}

				&:active {
					opacity: 0.8;
					transform: translateY(1rpx);
					box-shadow: 0 4rpx 15rpx rgba(213, 51, 186, 0.2);
				}

			}
		}

	}

	.section-title {
		position: relative;
		display: inline-block;
		margin: 30rpx 0 20rpx 20rpx;
	}

	.section-title h2 {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		padding-left: 20rpx;
		position: relative;
	}

	.section-title h2::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 30rpx;
		background-color: #007AFF;
		border-radius: 4rpx;
	}

	.section-title h2::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -8rpx;
		width: 100%;
		height: 2rpx;
		background: linear-gradient(to right, #007AFF, #409EFF);
		border-radius: 1rpx;
	}

	.showMode {
		height: 100rpx;
		padding: 20rpx;

		p {
			color: red;
		}
	}

	.twoConfirm {
		display: flex;
		justify-content: center;

		span {
			margin-left: 20rpx;
			margin-bottom: 15rpx;
			width: 38px;
			text-align: center;
			font-size: 13px;
			height: 23px;
			line-height: 46rpx;
			border-radius: 23px;
			font-size: 24rpx;
			font-weight: 500;
			letter-spacing: 1px;
			background: linear-gradient(90deg, #fbe45e 0%, #D533BA 100%);
			border: none;
			box-shadow: 0 4px 10px rgba(213, 51, 186, 0.25);
			transition: all 0.2s;
		}
	}

	// 推荐区域样式
	.recommend-section {
		background-color: #f9f9f9;
		padding: 10rpx 0 30rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
	}

	.recommend-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 0 16rpx;
		gap: 16rpx;
	}

	.recommend-item {
		width: calc(50% - 8rpx);
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease;
		
		&:hover {
			transform: translateY(-4rpx);
		}
	}

	.item-image {
		width: 100% !important;
		height: 280rpx !important;
		object-fit: cover !important;
		display: block;
	}

	.item-info {
		padding: 16rpx;
	}

	.item-title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 26rpx;
		color: #333;
		line-height: 1.4;
	}

	.item-price {
		display: block;
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #e63946;
		font-weight: bold;
	}
</style>